<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
  <style>
    body {
      font-size: 11px;
      font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
    }

    #site-ico {
      float:left;
      height:16px;
      width:16px;
    }

    #site-ico img {
      height:16px;
      width:16px;
    }

    #site-size { font-size: 18px; font-weight: bold; color:Red; float:left;}
    #site-name { font-size: 18px; font-weight: bold; color:#3B5998; /*clear:left;*/}  
  </style>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="./core/event.js"></script>
<script>

function parseURIQuery(query) 
{
  var data = {};
  if (!query) return data;
  
  var pair = ( query.substring(1) ).split('&');
  
  for(var i = 0; i < pair.length; i ++) 
  {
    var param = pair[i].split('=');
    data[ param[0] ] = decodeURIComponent(param[1]);
  }
  return data;
}

function OnError()
{
  this.setAttribute("src", "arrow-left.jpg");
}

function CreateView(info)
{

  var div      = document.createElement('div');
  div.setAttribute("class", "site-view" )
  var headSite = document.createElement('div');
  headSite.setAttribute("class", "head-site" )
  var bodySite = document.createElement('div');
  bodySite.setAttribute("class", "body-site" )
  div.appendChild(headSite);
  div.appendChild(bodySite);

  var faviconDiv = document.createElement('div');
  faviconDiv.setAttribute("class", "favicon");
  var faviconImg = document.createElement('img');
  Event.add(faviconImg, 'error', OnError)
  faviconImg.setAttribute("src", "http://" + info[0] + "/favicon.ico");
  faviconDiv.appendChild(faviconImg);
  headSite.appendChild(faviconDiv);

  var firstSite = document.createElement('div');
  firstSite.setAttribute("class", "first-site" );
  firstSite.appendChild( document.createTextNode(info[0]));
  bodySite.appendChild(firstSite);
  return div;
}


function SiteView(ownerNode, siteInfo)
{
  this.ownerNode = ownerNode;
  this.siteInfo = siteInfo;
  this.div = CreateView(siteInfo);
  ownerNode.appendChild(this.div);
}


function OnPublish(m) { try{
  /*if (!window)
    alert("!window");
  alert("OnPublish: " + JSON.stringify(m));
  */
  document.getElementById("counter").innerText = "counter="+ (++counter);
}catch(e){ alert(e.message); } }

function OnPublishSize(m) { try{
  /*if (!window)
    alert("!window");
  alert("OnPublishSize: " + JSON.stringify(m));
  */
  document.getElementById("counter-size").innerText = "counter-size="+ (++counterSize);
  document.getElementById("site-size").innerText = "(" + m.content + ")";
}catch(e){ alert(e.message); } }

function Dispose() { try{

// alert(channelName);
comet.describe( channelName, OnPublish );
comet.describe( channelNameSize, OnPublishSize );
}catch(e){ alert(e.message); } }

function OnLoad() { try{

  var json = parseURIQuery( window.location.search).params;  
  var params = JSON.parse(json);
  
  document.getElementById("site-name").innerText = params.site;
  var img = document.createElement("img");
  img.setAttribute("src", "http://" + params.site + "/favicon.ico");
  document.getElementById("site-ico").appendChild(img);
  Event.add(img, "error", OnError);
  window.comet = window.parent.parent.comet;

  // faceonline.whosonline.google.ru
  // window.comet.open( {channel:window.meChannel, cursor:1, min_size:1, max_size:20} );
  // window.comet.subscribe(window.meChannel, OnPublish);
  // {"jsonrpc":"2.0","method":"subscribe", "params":"faceonline.whosonline.google.ru"}
  // {"jsonrpc":"2.0","method":"subscribe", "params":"faceonline.whosonline.google.ru.$size"}
  // {"jsonrpc":"2.0","method":"load", "params":{"channel":"faceonline.whosonline.google.ru", "limit":10}, "id":1}

  counter = 0;
  counterSize = 0;
  channelName = "faceonline.whosonline." + params.site;
  channelNameSize = channelName + ".$size"
//  var channelName = "faceonline.whosonline.google.ru";
  //alert(channelName);
  comet.subscribe( channelName, OnPublish );
  comet.subscribe( channelNameSize, OnPublishSize );
  comet.open( { channel:channelName, cursor:1, min_size:1, max_size:33 } );
  comet.open( { channel:channelNameSize, cursor:1, min_size:1, max_size:2 } );

}catch(e){ alert(e.message); } }

Event.add(window, 'load', OnLoad)
</script>
</HEAD>
<BODY>
<div id = "main">
  <div id = "counter"></div>
  <div id = "counter-size"></div>
  <div id = "header">  
    <div id = "site-ico">  </div>
    <div id = "site-size">  </div>
    <div id = "site-name">  </div>
  </div>
  <div id = "content"> </div>
  <div id = "footer">  </div>
</div>
</BODY>
</HTML>
